<template>
	<!-- 历史任务页面容器 - 使用scroll-view实现下拉刷新 -->
	<scroll-view :style="{ paddingTop: safeDistance + 'px' }" class="task-history-container" scroll-y
		refresher-enabled="true" refresher-threshold="45" refresher-bg="#f9f9f9" refresher-color="#4CAF50"
		:refresher-triggered="isRefresher" @refresherrefresh="onRefresh">
		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 日期查询条件 -->
			<view class="date-filter">
				<view class="filter-header">
					<text class="filter-title">📅 日期筛选</text>
				</view>
				<view class="date-range-wrapper">
					<uni-datetime-picker v-model="dateRange" type="daterange" startPlaceholder="开始日期"
						endPlaceholder="结束日期" rangeSeparator="至" :border="false" @change="onDateRangeChange"
						class="date-range-picker"></uni-datetime-picker>
				</view>
				<button class="search-button" @click="searchByDateRange">
					<text class="search-button-text">🔍 查询历史</text>
				</button>
			</view>

			<!-- 数据展示区域 -->
			<view class="data-display-area">
				<!-- 查询加载中 -->
				<uni-load-more :status="loadingStatus" v-if="isLoading" />

				<!-- 无数据提示 -->
				<view class="empty-state" v-else-if="historySections.length === 0">
					<text class="empty-icon">📋</text>
					<text class="empty-title">暂无历史记录</text>
					<text class="empty-desc">选择日期范围后点击查询</text>
				</view>

				<!-- 日期分组的任务历史 -->
				<view v-else>
					<view class="date-section" v-for="section in historySections" :key="section.date">
						<view class="date-header">
							<view class="date-header-left">
								<text class="date-header-icon">📆</text>
								<text class="date-header-text">{{ section.header }}</text>
							</view>
							<view class="date-header-badge">{{ section.tasks.length }}</view>
						</view>
						<view class="history-list">
							<view class="history-item" v-for="item in section.tasks" :key="item.id"
								:class="{ 'task-completed': item.status === 1 }" hover-class="history-item-hover"
								hover-start-time="0" hover-stay-time="80">

								<!-- 状态标记条 -->
								<view class="status-bar" :class="item.status === 1 ? 'completed' : 'pending'"></view>

								<!-- 顶部：任务图标和序号 -->
								<view class="task-header">
									<view class="task-icon-wrapper">
										<image class="task-icon-image" :src="`${baseURL}${item.icon}`"
											mode="aspectFill"></image>
										<view v-if="item.status === 1" class="task-completed-badge">✓</view>
									</view>
									<view v-if="item.sequenceNumber" class="sequence-badge">
										<text class="sequence-text">#{{ item.sequenceNumber }}</text>
									</view>
								</view>

								<!-- 中间：任务信息 -->
								<view class="task-body">
									<text class="task-title">{{ item.taskName }}</text>

									<!-- 标签 -->
									<view v-if="item.tags" class="task-tags">
										<view class="tag" :class="getTagClass(item.tags)">
											<text class="tag-icon">{{ getTagIcon(item.tags) }}</text>
											<text class="tag-text">{{ item.tags }}</text>
										</view>
									</view>

									<!-- 元数据 -->
									<view class="task-meta">
										<view class="meta-item time">
											<text class="meta-icon">🕐</text>
											<text class="meta-text">{{ item.completeDate }}</text>
										</view>
										<view class="meta-item score">
											<text class="meta-icon">⭐</text>
											<text class="meta-text">{{ item.score || 0 }}分</text>
										</view>
									</view>
								</view>

								<!-- 底部：状态和操作 -->
								<view class="task-footer">
									<!-- 已完成：显示完成标记和分数 -->
									<view v-if="item.status === 1" class="status-completed">
										<view class="completed-badge">
											<text class="completed-icon">✅</text>
											<text class="completed-text">已完成</text>
										</view>
										<view class="score-display">
											<text class="score-label">得分</text>
											<text class="score-value">+{{ item.score || 0 }}</text>
										</view>
									</view>
									<!-- 未完成：显示补卡按钮 -->
									<button v-else class="supplement-button"
										@click.stop="handleSupplementCard(item.id)">
										<text class="supplement-icon">📌</text>
										<text class="supplement-text">立即补卡</text>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部空间，确保内容不被导航栏遮挡 -->
				<view class="bottom-space"></view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		completeTaskAPI,
		listHistoryTaskAPI
	} from '@/services/task';
	import { QueryHistoryTask } from '@/types';
	import { baseURL } from '@/utils/config';
	import { getThemeStyles } from '@/stores/theme';
	/**
	 * 安全距离（顶部内边距 = 安全区域 + 基础间距）
	 */
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});

	/**
	 * 历史记录分组数据
	 */
	const historySections = ref([]);

	/**
	 * 刷新状态
	 */
	const isRefresher = ref(false);

	/**
	 * 日期范围
	 */
	const getDefaultDateRange = () => {
		const today = new Date();
		const sevenDaysAgo = new Date(today);
		sevenDaysAgo.setDate(today.getDate() - 7);

		// 格式化日期为YYYY-MM-DD格式
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};

		return [formatDate(sevenDaysAgo), formatDate(today)];
	};

	const dateRange = ref(getDefaultDateRange());

	/**
	 * 当前查询条件
	 */
	const currentFilters = ref({
		startDate: dateRange.value[0],
		endDate: dateRange.value[1]
	});
	/**
	 * 加载状态
	 */
	const isLoading = ref(false);

	/**
	 * 加载状态文本
	 */
	const loadingStatus = ref('more');

	// 选中项 id
	const selectedId = ref(null);

	/**
	 * 获取当前主题样式
	 */
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 获取历史任务数据（API包装方法）
	 * @param filters 查询条件
	 * @returns Promise<void>
	 */
	const getHistoryTaskData = async (filters : QueryHistoryTask) => {
		try {
			// 调用API获取历史任务数据
			let response = await listHistoryTaskAPI(filters);
			const rawTasks = response.data || [];
			// 按completeDate字段分组数据
			const groupedData = {};
			rawTasks.forEach(task => {
				const dateKey = task.completeDate;
				if (!groupedData[dateKey]) {
					groupedData[dateKey] = [];
				}
				groupedData[dateKey].push({
					id: task.id?.toString(),
					taskName: task.taskName,
					icon: task.icon,
					score: task.score,
					tags: task.tags,
					sequenceNumber: task.sequenceNumber,
					completeDate: task.modifyTime.split(' ')[1],
					status: parseInt(task.status)
				});
			});

			// 转换为前端需要的格式并添加头部信息
			const sections = Object.keys(groupedData)
				.sort((a, b) => new Date(b).getTime() - new Date(a).getTime())
				.map(dateStr => ({
					date: dateStr,
					header: formatHeaderDate(dateStr),
					tasks: groupedData[dateStr]
				}));

			historySections.value = sections;
		} catch (error) {
			console.error('加载历史任务数据失败:', error);
		}
	};

	/**
	 * 获取日期对应的星期几
	 * @param date 日期对象
	 * @returns 中文星期几
	 */
	const checkWeekday = (date : Date) => {
		const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
		const dayIndex = date.getDay();
		return `周${weekdays[dayIndex]}`;
	}



	/**
	 * 格式化头部日期（处理2025-09-25这样的格式） ，最后面添加星期几
	 * @param dateStr 日期字符串
	 * @returns 格式化后的日期头部
	 */
	const formatHeaderDate = (dateStr : string) => {
		try {
			const date = new Date(dateStr);
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			const yesterday = new Date(today);
			yesterday.setDate(yesterday.getDate() - 1);
			const targetDate = new Date(date);
			targetDate.setHours(0, 0, 0, 0);

			if (targetDate.getTime() === today.getTime()) {
				return `今天 - ${formatFullDate(date)} - ${checkWeekday(date)}`;
			} else if (targetDate.getTime() === yesterday.getTime()) {
				return `昨天 - ${formatFullDate(date)} - ${checkWeekday(date)}`;
			} else {
				return `${formatFullDate(date)} - ${checkWeekday(date)}`;
			}
		} catch (error) {
			console.error('格式化日期失败:', error);
			return dateStr;
		}
	};

	/**
	 * 格式化完整日期
	 * @param date Date对象
	 * @returns 格式化的日期字符串
	 */
	const formatFullDate = (date) => {
		try {
			return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日`;
		} catch {
			return date.toString();
		}
	};

	/**
	 * 页面加载时获取数据
	 */
	onMounted(() => {
		// 开启加载状态
		isLoading.value = true;
		loadingStatus.value = 'loading';
		getHistoryTaskData(currentFilters.value)
		setTimeout(() => {
			// 关闭加载状态
			isLoading.value = false;
			loadingStatus.value = 'more';
		}, 1000);
	});

	/**
	 * 日期范围变化处理
	 * @param e 日期范围变化事件
	 */
	const onDateRangeChange = (e) => {
		console.log("onDateRangeChange", e)
		dateRange.value = e.detail.value;
	};

	/**
	 * 根据日期范围查询
	 */
	const searchByDateRange = async () => {
		// 验证日期范围
		if (!dateRange.value || dateRange.value.length !== 2 || !dateRange.value[0] || !dateRange.value[1]) {
			uni.showToast({
				title: '请选择完整的日期范围',
				icon: 'none'
			});
			return;
		}

		const [startDate, endDate] = dateRange.value;
		if (new Date(startDate) > new Date(endDate)) {
			uni.showToast({
				title: '开始日期不能晚于结束日期',
				icon: 'none'
			});
			return;
		}

		// 保存当前查询条件
		currentFilters.value = {
			startDate,
			endDate
		};

		console.log("searchByDateRange", currentFilters.value)
		// 开启加载状态
		isLoading.value = true;
		loadingStatus.value = 'loading';
		try {
			await getHistoryTaskData(currentFilters.value);
		} finally {
			setTimeout(() => {
				// 关闭加载状态
				isLoading.value = false;
				loadingStatus.value = 'more';
			}, 1000);
		}
	};





	/**
	 * 下拉刷新处理函数
	 */
	const onRefresh = async () => {
		isRefresher.value = true;
		try {
			// 重新获取历史任务数据
			await getHistoryTaskData(currentFilters.value);
		} finally {
			setTimeout(() => {
				isRefresher.value = false;
			}, 500);
		}
	};

	/**
	 * 处理补卡操作
	 * @param taskId 任务ID
	 */
	const handleSupplementCard = async (taskId : number) => {
		try {
			// 在实际应用中，这里可以调用API标记任务为已完成
			await completeTaskAPI(taskId);

			// 刷新任务列表，保持当前的查询条件
			await getHistoryTaskData(currentFilters.value);

			uni.showToast({
				title: '补卡任务已完成',
				icon: 'success'
			});
		} catch (error) {
			uni.showToast({
				title: '补卡任务失败',
				icon: 'none'
			});
		}
	};

	/**
	 * 获取标签对应的图标
	 * @param tag 标签名称
	 * @returns 图标emoji
	 */
	const getTagIcon = (tag : string) => {
		const iconMap = {
			'学习': '📚',
			'家务': '🏠',
			'运动': '⚽',
			'娱乐': '🎮',
			'工作': '💼'
		};
		return iconMap[tag] || '📌';
	};

	/**
	 * 获取标签对应的样式类
	 * @param tag 标签名称
	 * @returns CSS类名
	 */
	const getTagClass = (tag : string) => {
		const classMap = {
			'学习': 'tag-study',
			'家务': 'tag-housework',
			'运动': 'tag-sport',
			'娱乐': 'tag-entertainment',
			'工作': 'tag-work'
		};
		return classMap[tag] || 'tag-default';
	};
</script>

<style lang="scss" scoped>
	// 使用uni.scss中定义的通用样式变量

	// 主容器 - 历史任务页面主容器（使用scroll-view）
	.task-history-container {
		height: 100vh;
		background: v-bind('themeStyles.bgPrimary');
	}

	// 主要内容区域
	.content-container {
		padding: 20rpx;
		flex: 1;
	}

	// 数据展示区域
	.data-display-area {
		min-height: 200rpx;
		position: relative;
	}

	// 日期过滤器样式
	.date-filter {
		background: v-bind('themeStyles.bgCard');
		padding: 24rpx;
		border: 1rpx solid v-bind('themeStyles.borderLight');
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: v-bind('themeStyles.primaryGradient');
		}
	}

	.filter-header {
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid v-bind('themeStyles.borderLight');
	}

	.filter-title {
		font-size: 28rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.date-range-wrapper {
		margin-bottom: 20rpx;
		padding: 16rpx;
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 12rpx;
		border: 1rpx solid v-bind('themeStyles.borderLight');
	}

	.date-range-picker {
		width: 100%;
	}

	.search-button {
		width: 100%;
		padding: 16rpx;
		background: v-bind('themeStyles.primaryGradient');
		border: none;
		border-radius: 12rpx;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:active {
			transform: scale(0.98);
			box-shadow: v-bind('themeStyles.shadowSm');
		}
	}

	.search-button-text {
		font-size: 28rpx;
		font-weight: 600;
		color: white;
	}

	// 空状态样式
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		gap: 20rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		opacity: 0.5;
		animation: emptyFloat 3s ease-in-out infinite;
	}

	.empty-title {
		font-size: 32rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.empty-desc {
		font-size: 26rpx;
		color: v-bind('themeStyles.textTertiary');
		text-align: center;
	}

	@keyframes emptyFloat {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	// 日期分组
	.date-section {
		margin-bottom: 32rpx;
		animation: sectionFadeIn 0.4s ease-out;
	}

	@keyframes sectionFadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	// 日期头部
	.date-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 20rpx;
		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderLight');
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		box-shadow: v-bind('themeStyles.shadowSm');
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 4rpx;
			background: v-bind('themeStyles.primaryGradient');
		}
	}

	.date-header-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.date-header-icon {
		font-size: 32rpx;
	}

	.date-header-text {
		font-size: 26rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
	}

	.date-header-badge {
		padding: 4rpx 12rpx;
		background: v-bind('themeStyles.primaryGradient');
		color: white;
		border-radius: 12rpx;
		font-size: 22rpx;
		font-weight: 600;
		min-width: 40rpx;
		text-align: center;
		box-shadow: v-bind('themeStyles.shadowSm');
	}

	// 历史任务列表 - 两列Grid布局
	.history-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
	}

	// 历史任务项 - 垂直布局
	.history-item {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderLight');
		border-radius: 16rpx;
		box-shadow: v-bind('themeStyles.shadowSm');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		animation: itemFadeIn 0.3s ease-out;
		min-height: 320rpx;
		overflow: hidden;
	}

	// 状态标记条
	.status-bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		transition: all 0.3s ease;

		&.completed {
			background: v-bind('themeStyles.successColor');
		}

		&.pending {
			background: v-bind('themeStyles.warningColor');
		}
	}

	@keyframes itemFadeIn {
		from {
			opacity: 0;
			transform: translateX(-10rpx);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.history-item-hover {
		transform: translateY(-4rpx);
		box-shadow: v-bind('themeStyles.hoverBoxShadow');
	}

	.history-item.task-completed {
		background: v-bind('themeStyles.accentBg');
		border-top: 4rpx solid v-bind('themeStyles.successColor');
		border: 2rpx solid v-bind('themeStyles.accentBorder');

		.task-title {
			text-decoration: line-through;
			opacity: 0.6;
		}
	}

	// 顶部：任务图标区域
	.task-header {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		margin-bottom: 12rpx;
		margin-top: 8rpx;
		position: relative;
	}

	.task-icon-wrapper {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		background: v-bind('themeStyles.bgSecondary');
		border: 3rpx solid v-bind('themeStyles.borderLight');
		box-shadow: v-bind('themeStyles.shadowSm');
	}

	// 序号徽章
	.sequence-badge {
		position: absolute;
		top: -4rpx;
		right: 8rpx;
		background: v-bind('themeStyles.primaryGradient');
		padding: 4rpx 10rpx;
		border-radius: 12rpx;
		box-shadow: v-bind('themeStyles.shadowSm');
	}

	.sequence-text {
		font-size: 18rpx;
		font-weight: 700;
		color: white;
	}

	.task-icon-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.task-completed-badge {
		position: absolute;
		bottom: -4rpx;
		right: -4rpx;
		width: 32rpx;
		height: 32rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 18rpx;
		font-weight: bold;
		border: 3rpx solid v-bind('themeStyles.bgCard');
		box-shadow: v-bind('themeStyles.shadowSm');
		animation: badgePop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	@keyframes badgePop {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	// 中间：任务信息区域
	.task-body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		margin-bottom: 12rpx;
	}

	.task-title {
		font-size: 26rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textPrimary');
		line-height: 1.4;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		min-height: 72rpx;
	}

	// 标签
	.task-tags {
		display: flex;
		justify-content: center;
		gap: 8rpx;
	}

	.tag {
		display: flex;
		align-items: center;
		gap: 4rpx;
		padding: 4rpx 12rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-weight: 500;
		transition: all 0.3s ease;

		&.tag-study {
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
			border: 1rpx solid rgba(59, 130, 246, 0.3);
			color: #2563eb;
		}

		&.tag-housework {
			background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(219, 39, 119, 0.05) 100%);
			border: 1rpx solid rgba(236, 72, 153, 0.3);
			color: #db2777;
		}

		&.tag-sport {
			background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%);
			border: 1rpx solid rgba(34, 197, 94, 0.3);
			color: #16a34a;
		}

		&.tag-entertainment {
			background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.05) 100%);
			border: 1rpx solid rgba(249, 115, 22, 0.3);
			color: #ea580c;
		}

		&.tag-work {
			background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
			border: 1rpx solid rgba(139, 92, 246, 0.3);
			color: #7c3aed;
		}

		&.tag-default {
			background: v-bind('themeStyles.accentBg');
			border: 1rpx solid v-bind('themeStyles.accentBorder');
			color: v-bind('themeStyles.textSecondary');
		}
	}

	.tag-icon {
		font-size: 18rpx;
	}

	.tag-text {
		font-size: 20rpx;
		font-weight: 600;
	}

	.task-meta {
		display: flex;
		gap: 6rpx;
		flex-wrap: wrap;
		justify-content: center;
	}

	.meta-item {
		display: flex;
		align-items: center;
		gap: 4rpx;
		padding: 4rpx 8rpx;
		background: v-bind('themeStyles.accentBg');
		border-radius: 8rpx;
		border: 1rpx solid v-bind('themeStyles.accentBorder');

		&.time {
			background: v-bind('themeStyles.accentBg');
			border-color: v-bind('themeStyles.primaryColor') + '33';
		}

		&.score {
			background: v-bind('themeStyles.accentBg');
			border-color: v-bind('themeStyles.warningColor') + '33';
		}
	}

	.meta-icon {
		font-size: 18rpx;
	}

	.meta-text {
		font-size: 20rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}

	// 底部：分数或补卡区域
	.task-footer {
		margin-top: auto;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	// 已完成状态
	.status-completed {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		width: 100%;
	}

	.completed-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6rpx;
		padding: 8rpx 12rpx;
		background: v-bind('themeStyles.accentBg');
		border: 1rpx solid v-bind('themeStyles.successColor') + '4d';
		border-radius: 10rpx;
	}

	.completed-icon {
		font-size: 20rpx;
	}

	.completed-text {
		font-size: 20rpx;
		font-weight: 600;
		color: v-bind('themeStyles.successColor');
	}

	.score-display {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 12rpx;
		background: v-bind('themeStyles.accentBg');
		border: 1rpx solid v-bind('themeStyles.warningColor') + '4d';
		border-radius: 10rpx;
	}

	.score-label {
		font-size: 20rpx;
		color: v-bind('themeStyles.textTertiary');
		font-weight: 500;
	}

	.score-value {
		font-size: 24rpx;
		font-weight: 700;
		color: v-bind('themeStyles.warningColor');
	}

	// 补卡按钮
	.supplement-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6rpx;
		width: 100%;
		padding: 12rpx 16rpx;
		background: linear-gradient(135deg, v-bind('themeStyles.warningColor') 0%, v-bind('themeStyles.infoColor') 100%);
		border: none;
		border-radius: 10rpx;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:active {
			transform: scale(0.95);
			box-shadow: v-bind('themeStyles.shadowSm');
		}
	}

	.supplement-icon {
		font-size: 20rpx;
	}

	.supplement-text {
		font-size: 22rpx;
		font-weight: 600;
		color: white;
	}

	// 底部空间
	.bottom-space {
		height: 100rpx;
	}
</style>